<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/dayjs/1.10.8/dayjs.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
        <!-- 
            如果一个html标签使用了 ref属性 那么我们可以通过  this.$refs['ref的属性的值'] 
            就可以访问这个节点对象
         -->
         <!-- 虽然通过 document.querySelector也可以获得指定的节点 但是随着开发的规模越来越大 有可能会出现命名的冲突 -->
            <div ref="a" class="a"> kfc </div>
            <button @click="fn1" > fn1 按钮</button>

            <hr />

            <!-- 
                如果是一个自定义组件使用了 ref属性 
                 那么我们可以通过  this.$refs['ref的属性的值'] 
                 就可以访问这个组件实例
                 目的： 就是希望能够在外部 去调用组件内部的方法或者修改组件内部的状态
            
            -->
            <cp1 ref="c"></cp1>
            <button @click="fn2" > fn2 按钮</button>

          
            <div v-for="item of 10" ref="d"> {{ item}} </div>
            <!-- <div ref="d"> 123 </div>
            <div ref="d"> 456 </div> -->
            <button @click="fn3"> fn3 按钮</button>

            <cp1 v-for="item of 3" ref="e"></cp1>
            <button @click="fn4"> fn4 按钮</button>

    </div>

        
    
    <script>


        Vue.component('cp1',{
            template: `<div>
                            我是组件1
                            <div> ct is : {{ ct }} </div> 
                        </div>`,
            data(){
                return {
                    ct:1
                }
            },
            methods:{
                incrementCt(){
                    this.ct++
                }
            }
        })
       

        const app = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                fn1(){
                    console.log( this.$refs.a )
                },
                fn2(){
                    console.log( this.$refs.c )
                    // console.log( this)
                    // this.$refs.c.incrementCt()
                    // 大大的问号
                    // if(this.$refs.c.ct >= 100) this.$refs.c.ct = "完成了"
                    if(this.$refs.c.ct != "" ) this.$refs.c.ct += 10 
                },
                fn3(){
                    console.log( this.$refs.d)
                },
                fn4(){
                    console.log( this.$refs.e)
                    
                    this.$refs.e[0].ct+=1
                    console.log( this.$refs.e[0].ct)
                    console.log( this.$refs.e)
                }
            },
            // props:{
            //     kloiii: Number 
            // }

            
        })





    </script>

</body>
</html>